<template>
  <!--视图-->
  <div id="app">
     {{message}}
    <span v-for="g in user" :class="g.date=='2016-05-02'?color:''"><br>
      {{g.date}} :   {{g.name}}  : {{g.sf}}  : {{g.sq}} : {{g.adress}}
      <button @click="look(g)">查看</button>
      <button>编辑</button>
    </span>
  </div>
</template>

<script>
export default {
  name: "UserView",
  data() {//属性
    return {
       message:"hello,vue!",
       user:[{date:"2016-05-02",name:"王小虎",sf:"上海2",sq:"普陀区",adress:"上海市"},{date:"2016-05-03",name:"王小虎2",sf:"上海1",sq:"普陀区",adress:"上海市"},{date:"2016-05-04",name:"王小虎3",sf:"上海3",sq:"普陀区",adress:"上海市"},{date:"2016-05-08",name:"王小虎4",sf:"上海1",sq:"普陀区",adress:"上海市"}],
       color:'green'
    }
  }, methods: {//自定义方法
     look(g){
        alert(g.date+g.name+g.sf+g.sq+g.adress)
     }
  }, created() { //钩子函数

  }
}
</script>

<style scoped>
.green{
   background-color: #42b983;
}
</style>